<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Audio.js</title>
</head>
<body>
<button onclick="switch_mp3()">换歌</button>
<button onclick="audio.pause()">暂停</button>
<button onclick="audio.play()">继续</button>

<br>
<input type="range" name="volume" id="volume" value="100"> 音量
<br>
<input type="range" name="slide" id="slide" style="width:300px;" value="0">
<br>

<script src="index.js"></script>
<script>
	var i = 0,
		volume = document.getElementById('volume'),
		slide = document.getElementById('slide'),
		slide1 = document.getElementById('slide1'),
		audio = new Audio(),
		mp3s = [
			"http://wayou.github.io/selected/content/songs/na_ge.mp3",
			"http://wayou.github.io/selected/content/songs/dong_tian_de_mi_mi.mp3",
			"http://wayou.github.io/selected/content/songs/lin_yu_yi_zhi_zou.mp3",
			"http://wayou.github.io/selected/content/songs/xun_xun_mi_mi.mp3"
		];
	document.body.appendChild( audio );

	var focus, loadFn = function(){	//flash加载
		audio.load( mp3s[0] );
		audio.play();

		audio.ontimeupdate = function(e){	// 进度条事件, flash 版本没有详细事件
			if( !focus ){
				slide.value = audio.currentTime * 100 / audio.duration;
			}
		};
		audio.onended = function(e){
			switch_mp3();
		}

		slide.onfocus = function(){
			focus = true;
		};
		slide.onblur = function(){
			focus = false;
		};
		slide.onchange = function(){
			audio.setPercent( this.value / 100 );
		};
		volume.onchange = function(){
			audio.setVolume( this.value / 100 );
		}
	};
	
	// flash需要额外绑定事件。
	if( window.Audio.flash ){
		audio.onload = loadFn;
	}else{
		loadFn();
	}

	function switch_mp3 () {
		i = (i+1) % mp3s.length;
		audio.load( mp3s[i] );
		audio.play();
	}


</script>
</body>
</html>